<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
	.mask-wrapper {
		position: relative;
		overflow: hidden;
	}
	.mask-inner {
		position: absolute;
		left: 0;
		top: 100%;
		width: 100%;
		height: 100%;
		-moz-transition: top ease 200ms;
		-o-transition: top ease 200ms;
		-webkit-transition: top ease 200ms;
		transition: top ease 200ms;
	}
	.mask-wrapper:hover .mask-inner {
		top: 0;
	}
	#mymask {
		width: 300px;
		height: 200px;
		background: red;
	}
	#mymask .mask-inner {
		background: rgba(0, 0, 0, .5);
	}

</style>
</head>
<body>
    <div id="mymask" class="mask-wrapper">
    	<p>aaaaaa</p>
    	<div class="mask-inner">
    		<p>bbbbbbbb</p>
    	</div>
    </div>
</body>
</html>